<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<style>
	div {
		border: 1px solid red;
		width: 100px;
		height: 100px;
	}
	/*1.四个边一起设置相同的边距*/
	#d2 {
		padding: 20px;
		margin: 30px;
	}
	/*2.四个边一起设置不同的边距
		顺序：上 右 下 左 */
	#d3 {
		padding: 10px 20px 30px 40px;
		margin: 10px 20px 30px 40px;
	}
	/*3.单个边设置边距*/
	#d4 {
		padding-left: 20px;
		margin-bottom: 30px;
	}
	/*4.对边设置边距
		顺序：上下  左右 */
	#d5 {
		padding: 20px 40px;
		margin: 40px 30px;
	}
	/*5.对边设置边距的特殊用法，
		只针对margin有效。即当左右值为
		auto时，该元素将水平居中。 */
	#d6 {
		margin: 20px auto;
	}
</style>
</head>
<body>
	<div id="d1">d1</div>
	<div id="d2">d2</div>
	<div id="d3">d3</div>
	<div id="d4">d4</div>
	<div id="d5">d5</div>
	<div id="d6">d6</div>
</body>
</html>









